<template>
	<div class="card-wrap res">
		<view v-if="classLists.length > 0" class="info">今日课程</view>
		<view v-else class="info">暂无课程~</view>
		<view class="content">
			<uni-collapse accordion @change="change" open>
			    <uni-collapse-item showAnimation v-for="(item,index) in classLists" :key="index" :open="index === openIndex">
					<!-- 自定义标题 -->
					<view slot="title">
						<view class="title-row">
							<text class="block themeBgColor"></text> {{item.classInfo.teachUserName}}老师·{{item.classInfo.subjectName}}课<uni-tag :text="getTime(item)" type="default" circle></uni-tag>
						</view>
						<view class="addr">
							<uni-icons type="location-filled"></uni-icons>{{item.classInfo.roomAddr}}
						</view>
					</view>
					<!-- 折叠内容主体 -->
			        <view class="collapse" style="padding: 0 32rpx 28px 32rpx;">
						<uni-steps :options="getOptions(item)" direction="column" :active="active"></uni-steps>
						<view v-if="!item.isNoClick" @click="clock(item, index)" class="cricle-clock-btn normal">
							<view class='time'>{{nowTime}}</view>
							<text>上课打卡</text>
						</view>
						<view v-else class="cricle-clock-btn disabled">
							<view class='time'>{{nowTime}}</view>
							<text>无法打卡</text>
						</view>
						<view class="addr text-center">
							<uni-icons type="location-filled"></uni-icons>当前位置：{{address}}
							<uni-icons @click="reloadLocation(index)" type="reload"></uni-icons>
						</view>
						<view class="in-area-tip" v-show="item.isShowTip">
							<text>{{item.tip}}</text>
						</view>
			        </view>
			    </uni-collapse-item>
			</uni-collapse>
		</view>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
let qqMapWX = new QQMapWX({
		key:'EOYBZ-UBF33-ZZA3O-YOSU2-ZBVUK-KDBMJ'
	})
export default {
	props: {
		classLists: {
			type: Array,
			default:  []
		},
		address: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			openIndex:0,//展开第几个
			active: 0,//步骤到第几个
			nowTime:'',
			intervalObj:null,
			nowLocation: [],
			qqMapWX: null,
			punchEndTime: '',
			punchBeginTime: '',
			disKM: 0
		};
	},
	onReady(){
		this.getConfig()
	},
	onShow () {
		console.log('onshow')
		// uni.showModal({
		// 	title: '提示',
		// 	content: '请先登录',
		// 	confirmText: '知道了',
		// 	showCancel: false,
		// 	cancelColor: '#81B435',
		// 	success: (res) => {
		// 		uni.navigateBack({
		// 			delta: 1
		// 		})
		// 	}
		// });
	},
	created() {
		this.getNowTime()
		this.intervalObj = setInterval(()=>{
			this.getNowTime()
		},1000)
	},
	destroyed() {
		clearInterval(this.intervalObj);
	},
	computed: {
		// ...mapState(['classLists'])
	},
	methods: {
		reloadLocation (index) {
			// 是否可以打卡
			this.classLists[index].isOutArea = false
			// 是否显示提示
			this.classLists[index].isShowTip = false
			// 提示内容
			this.classLists[index].tip = ''
			this.$emit('reloadLocation')
		},
		async getConfig () {
			try {
				let resEnd = await this.$api.common.getSysConfig('edu.punch_end_time')
				let resBegin = await this.$api.common.getSysConfig('edu.punch_begin_time')
				this.punchEndTime = resEnd.msg
				this.punchBeginTime = resBegin.msg
				console.log(this.punchEndTime, this.punchBeginTime)
			} catch (e) {
				this.punchEndTime = '10'
				this.punchBeginTime = '30'
			}
		},
		
		async getStudentPunchs () {
			let userId = this.$store.state.userInfo.userId
			let res = await this.$api.sign.getStudentPunchs(userId)
			this.classLists = res.data
			console.log(res, 'res')
		},
		change(e) {
			console.log(e)
		},
		formatLaLo (str) {
			return str.split('').reverse().join('').replace('.', '').split('').reverse().join('')
		},
		clock (item, index) {
			console.log(item,' item')
			let roomLatLongItude = item.classInfo.latLongItude.split('E')
			roomLatLongItude[0] = this.formatLaLo(roomLatLongItude[0].substr(1))
			roomLatLongItude[1] = this.formatLaLo(roomLatLongItude[1])
			console.log(roomLatLongItude, 'roomLatLongItude')
			console.log(roomLatLongItude[0], roomLatLongItude[1], this.nowLocation[0], this.nowLocation[1], 6666666666)
			// let juli = this.cla(roomLatLongItude[0], roomLatLongItude[1], this.nowLocation[0], this.nowLocation[1])
			// console.log('距离', juli)
			// if (juli*1000 > 50000) {
			// 	uni.showToast({
			// 		title: '不在打卡范围内',
			// 		icon: "none"
			// 	})
			// }
			qqMapWX.calculateDistance({
				to: roomLatLongItude[0] + "," + roomLatLongItude[1],
				success: res => {
					console.log(res);
					var res = res.result;
					var dis = [];
					for (var i = 0; i < res.elements.length; i++) {
						dis.push(res.elements[i].distance); //将返回数据存入dis数组，
					}
					//获得的结果是一个数组，先转为字符串在转为数组
					this.disKM = Number(dis.toString())
					console.log(this.disKM);
					this.classLists[index].isShowTip = this.disKM > item.classInfo.punchRadius
					this.classLists[index].tip = '当前位置不在打卡范围'
					console.log(this.classLists[index].isOutArea, 'this.classLists[index].isOutArea')
					this.classLists[index].isNoClick = this.classLists[index].isOutArea
				},	
				fail: function(res) {
					console.log('失败');
				}
			})
		},
		getTime(item){
			return `${item.classInfo.classBeginTime}~${item.classInfo.classEndTime}`
		},
		cla (la1, lo1, la2, lo2) {
			var La1 = la1 * Math.PI / 180.0;
			var La2 = la2 * Math.PI / 180.0;
			var La3 = La1 - La2;
			var Lb3 = lo1 * Math.PI / 180.0 - lo2 * Math.PI / 180.0;
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(La3 / 2), 2) + Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)));
			s = s * 6378.137; //地球半径
			s = Math.round(s * 10000) / 10000;
			return s
		 },
		getNowTime(){
			let now = new Date();
			let h = now.getHours();
			let m = now.getMinutes();
			m < 10 ? m = '0'+ m : null
			let s = now.getSeconds();
			s < 10 ? s = '0'+ s : null
			this.nowTime = `${h}:${m}:${s}`
			// 判度是否在打卡时间范围内
			this.classLists.forEach((ele, index) => {
				let startSpan = this.timeToTimespan(ele.classInfo.classBeginTime, this.punchBeginTime, '-')
				let endSpan = this.timeToTimespan(ele.classInfo.classEndTime, this.punchEndTime, '+')
				let nowSpan = this.timeToTimespan(this.nowTime)
				console.log(startSpan,endSpan,nowSpan, '4444444')
				if (!(nowSpan >= startSpan && nowSpan <= endSpan)) {
					this.classLists[index].isNoClick = true
					this.classLists[index].isShowTip = true
					this.classLists[index].tip = '不在打卡时间内'
				} else {
					this.classLists[index].isNoClick = false
					this.classLists[index].isShowTip = false
					this.classLists[index].tip = ''
				}
			})
		},
		timeToTimespan (time, time1 = 0, operate = '+') {
			let timeArr = time.split(':')
			let time1Span = time1 * 60 * 1000
			let timeSpan = timeArr.length == 2 ? timeArr[0] * 60 * 60 * 1000 + timeArr[1] * 60 * 1000 : timeArr[0] * 60 * 60 * 1000 + timeArr[1] * 60 * 1000 +  timeArr[2] * 1000
			if (operate == '+') {
				return timeSpan + time1Span
			} else if (operate == '-') {
				return timeSpan - time1Span
			}
			return 0
		},
		getOptions(item){
			let options = [
				{title:'上课时间',desc:item.classInfo.classBeginTime},
				{title:'下课时间',desc:item.classInfo.classEndTime},
			]
			return options
		}
	}
};
</script>

<style lang="scss">
page{
	background-color: $uni-bg-color-grey;
}
.card-wrap{
	.info{
		line-height: 64px;
		font-size: 13px;
		color: $uni-text-color-grey;
		text-align: center;
	}
	.content{
		padding: 0 16px;
		.title-row{
			position: relative;
			.block{
				position: absolute;
				left: -12px;
				top: 4px;
				width: 4px;
				height: 16px;
			}
		}
		.addr{
			font-size: 13px;
			color: $uni-text-color-grey;
		}
		.addr.text-center{
			text-align: center;
		}
		.cricle-clock-btn{
			margin: 16px auto;
			width: 100px;
			height: 100px;
			border-radius: 50px;
			text-align: center;
			padding-top: 30px;
			box-shadow: 0 6px 16px 0 rgba($color: $uni-theme-color, $alpha: 0.36);
			// border: 8px solid rgba($color: $uni-theme-color, $alpha: 0.5);
			.time{
				font-size: 17px;
			}
		}
		.cricle-clock-btn.normal{
			background-color: $uni-theme-color;
			color: white;
		}
		.cricle-clock-btn.disabled{
			background-color: $uni-bg-color-grey;
		}
	}
}
@-webkit-keyframes rotation {
			from {
				-webkit-transform: rotate(0deg);
			}
			to {
				-webkit-transform: rotate(360deg);
			}
		}
		.Rotation {
			-webkit-transform: rotate(360deg);
			animation: rotation 10s linear infinite;
			-moz-animation: rotation 10s linear infinite;
			-webkit-animation: rotation 10s linear infinite;
			-o-animation: rotation 10s linear infinite;
		}
.in-area-tip {
	line-height: 22px;
	position: absolute;
	bottom: 0;
	height: 22px;
	color: #ED6A0C;
	font-size: 12px;
	text-align: center;
	background: #FFFBE8;
	width: 100%;
	left: 0;
}

</style>
